<!-- ... existing code ... -->
<content id="content">
    <!-- 确保这里的内容没有语法错误或缺失 -->
    <nav th:replace="mall/header::nav-fragment"></nav>
    <div id="banner">
        <!-- 商品分类列表 -->
        <div class="all-sort-list" >
            <!-- 确保这里的循环和条件判断没有问题 -->
            <th:block th:each="category : ${categories}">
                <div class="item">
                    <h3>
                        <span>·</span>
                        <a href="#" th:href="@{'/shopping/item/search?id=' + ${category.id}}">
                            <th:block th:text="${category.name}"></th:block>
                        </a>
                    </h3>
                    <div class="item-list clearfix">
                        <div class="subitem">
                            <ul class="second-level-menu">
                                <th:block th:each="childCategory : ${category.children}">
                                    <li class="category-item">
                                        <div class="category-link">
                                            <a href="#" th:href="@{'/shopping/item/search?id=' + ${childCategory.id}}">
                                                <th:block th:text="${childCategory.name}"></th:block>
                                            </a>
                                        </div>
                                    <!-- 子分类容器，支持悬停显示三级菜单 -->
                                    <dd th:if="${childCategory.children != null and !childCategory.children.isEmpty()}" 
                                        class="submenu">
                                        <ul class="third-level-menu">
                                            <th:block th:each="grandChild : ${childCategory.children}">
                                                <li>
                                                    <a href="#" th:href="@{'/shopping/item/search?id=' + ${grandChild.id}}">
                                                        <th:block th:text="${grandChild.name}"></th:block>
                                                    </a>
                                                </li>
                                            </th:block>
                                        </ul>
                                    </dd>
                                    </li>
                                </th:block>
                            </ul>
                        </div>
                    </div>
                </div>
            </th:block>
        </div>
        <!-- 首页轮播图 -->
        <div class="swiper-container fl">
            <div class="swiper-wrapper">
                <th:block >
                    <div class="swiper-slide">
                        <img th:src="@{/mall/image/swiper/banner01.jpg}" th:alt="@{/shopping/order}">
                    </div>
                    <div class="swiper-slide">
                        <img th:src="@{/mall/image/swiper/8esnf17m.png}" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img th:src="@{/mall/image/swiper/6bsvn2xm.png}" alt="">
                    </div>
                </th:block>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <!-- 热销商品展示区域 -->
    <div id="sub_banner">
        <h2>热销</h2>
        <!-- 已配置热销商品则显示配置内容 -->
        <th:block th:unless="${#lists.isEmpty(hostItems)}">
            <th:block th:each="hostItem : ${hostItems}">
                <div class="hot-image">
                    <a th:href="@{'/shopping/detail/'+${hostItem.id}}">
                        <img th:src="@{${hostItem.pic}}" th:alt="${hostItem.name}">
                    </a>
                </div>
            </th:block>
        </th:block>
        <!-- 未配置热销商品则显示默认 -->
        <th:block th:if="${#lists.isEmpty(hostItems)}">
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/r4.jpg}" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/hot2.jpg}" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/hot3.jpg}" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img th:src="@{/mall/image/sub_banner/hot4.jpg}" alt="">
                </a>
            </div>
        </th:block>
    </div>
    <!-- 新品上市展示区域 -->
    <div id="flash">
        <h2>新品上市</h2>
        <ul>
            <!-- 已配置新品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(newItems)}">
                <th:block th:each="newItem : ${newItems}">
                    <li>
                        <a th:href="@{'item/detail/'+${newItem.id}}">
                            <img th:src="@{${newItem.image}}" th:alt="${newItem.name}">
                            <p class="name" th:text="${newItem.name}">NewBeeMall</p>
                            <p class="discount" th:text="${newItem.description}">NewBeeMall</p>
                            <p class="item_price" th:text="${newItem.sellPrice}">NewBeeMall</p>
                        </a>
                    </li>
                </th:block>
            </th:block>
            <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(newItems)}">
                <li>
                    <a href="##">
                        <img th:src="@{/mall/image/sub_banner/m6.jpg}" alt=""/>
                        <p class="name">华为平板 M6</p>
                        <p class="discount">醇香音质 身临其境</p>
                        <p class="price">1499元起</p>
                    </a>
                </li>
                <!-- 更多默认项... -->
            </th:block>
        </ul>
    </div>
    <!-- 为你推荐展示区域 -->
    <div id="recommend">
        <h2>为你推荐</h2>
        <ul>
            <!-- 已配置推荐商品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(recommendItems)}">
                <th:block th:each="recommendItem : ${recommendItems}">
                    <li>
                        <a th:href="@{'item/detail/'+${recommendItem.id}}">
                            <img th:src="@{${recommendItem.image}}" th:alt="${recommendItem.name}">
                            <p class="name" th:text="${recommendItem.name}">NewBeeMall</p>
                            <p class="item_price" th:text="${recommendItem.sellPrice}">NewBeeMall</p>
                            <p class="counter">猜你喜欢</p>
                            <div class="comment">
                                <p> 买得起精选</p>
                                <p>好物也可以不贵</p>
                            </div>
                        </a>
                    </li>
                </th:block>
            </th:block>
            <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(recommendItems)}">
                <li>
                    <a href="##">
                        <div class="info discount">
                            新品
                        </div>
                        <img th:src="@{/mall/image/sub_banner/r1.jpg}" alt=""/>
                        <p class="name">华为平板 M6</p>
                        <p class="price">1499元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p> 买得起精选</p>
                            <p>好物也可以不贵</p>
                        </div>
                    </a>
                </li>
                <!-- 更多默认项... -->
            </th:block>
        </ul>
    </div>
</content>
<!-- ... existing code ... -->